<template>
	<view class="grid padding-xs bg-white" :class="['col-'+props.col,menuBorder ? 'sm-border' : '', menuCard ? 'card-menu ' : '']">
		<view class="cu-button margin-0 flex justify-center align-center" v-for="(item, index) in list" :key="index" :data-index="index" :data-value="item" @click="handleSelect">
			<view class=" text-center">
				<view class="title">{{ item.name }}</view>
				<view class="desc">{{ item.desc }}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { useSettingStore } from '@/stores/index';
const emit = defineEmits(['action']);
const props = defineProps({
	menuBorder: {
		type: [Boolean, String],
		default: false
	},
	menuCard: {
		type: [Boolean, String],
		default: false
	},
	col: {
		type: Number,
		default:2
	},
	list: {
		default: () => {
			return [
				{
					id: 0,
					name: '',
					desc: ''
				}
			];
		}
	}
});
const handleSelect = e => {
	emit('action', e);
};
</script>

<style lang="scss">
.grid {
	border-radius: 6rpx;
}
.cu-button{
	background-image: url('../../static/bg_button.png');
	background-size: 100% 100%;
	width: 100%;
	height: 62px;
	.title{
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #0660C9;
		line-height: 20px;
		letter-spacing: 1px;
	}
	.desc{
		font-size: 10px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8FC2FD;
		line-height: 14px;
		margin-top: 6px;
	}
}
</style>
